<template>
  <div class="musicDetail">
    <img :src="props.musicList.al.picUrl" class="bgImg" />
    <div class="top">
      <div class="topLeft">
        <svg class="icon" aria-hidden="true" @click="back">
          <use xlink:href="#icon-zuojiantou"></use>
        </svg>
        <div class="title">
          <vue3-marquee>
            <p>{{ props.musicList.al.name }}</p>
          </vue3-marquee>
          <span v-for="item in props.musicList.ar" :key="item.id">
            {{ item.name }}
          </span>
        </div>
      </div>
      <div class="topRight">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fenxiang"></use>
        </svg>
      </div>
    </div>
    <div class="center" v-show="!isLyricShow">
      <img src="@/assets/cd.png" class="cd" />
      <img
        src="@/assets/needle.png"
        class="needle"
        :class="{ needle_active: !isBtnShow }"
      />
      <img
        :src="props.musicList.al.picUrl"
        class="ar"
        :class="{ ar_active: !props.isBtnShow, ar_paused: props.isBtnShow }"
        @click="isLyricShow = true"
      />
    </div>
    <div class="lyrc" ref="musiclyrc" v-show="isLyricShow">
      <p
        v-for="item in lyric"
        :key="item"
        :class="{
          active:
            currentTime * 1000 >= item.time && currentTime * 1000 <= item.pre
        }"
      >
        {{ item.lrc }}
      </p>
    </div>
    <div class="footer">
      <div class="footerTop">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-aixin"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-iconfontzhizuobiaozhun023146"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-yinlechangpian"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-liuyan"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-aixin"></use>
        </svg>
      </div>
      <div class="footerContent">
        <input
          type="range"
          min="0"
          :max="duration"
          v-model="currentTime"
          step="0.05"
        />
      </div>
      <div class="footerBottom">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xunhuan"></use>
        </svg>
        <svg class="icon" aria-hidden="true" @click="go(-1)">
          <use xlink:href="#icon-shangyiqu101"></use>
        </svg>
        <svg
          class="iconCenter"
          aria-hidden="true"
          @click="props.play"
          v-if="props.isBtnShow"
        >
          <use xlink:href="#icon-bofang"></use>
        </svg>
        <svg class="iconCenter" aria-hidden="true" @click="props.play" v-else>
          <use xlink:href="#icon-24gl-pauseSquare"></use>
        </svg>
        <svg class="icon" aria-hidden="true" @click="go(1)">
          <use xlink:href="#icon-xiayiqu101"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-24gf-playlistMusic"></use>
        </svg>
      </div>
    </div>
  </div>
</template>
<script setup>
import { Vue3Marquee } from 'vue3-marquee'
import { useStore } from 'vuex'
import { ref, computed, watch, onUpdated } from 'vue'
import 'vue3-marquee/dist/style.css'
const props = defineProps(['musicList', 'play', 'isBtnShow', 'addDuration'])
const store = useStore()
const musiclyrc = ref(null)
const lyricList = computed(() => store.state.lyricList)
const playListIndex = computed(() => store.state.playListIndex)
const playList = computed(() => store.state.playList)
const currentTime = computed(() => store.state.currentTime)
const duration = computed(() => store.state.duration)
onUpdated(() => {
  props.addDuration()
})
const go = (num) => {
  let index = playListIndex.value + num
  if (index < 0) {
    index = playList.value.length - 1
    console.log(index)
  }
  if (index === playList.value.length) {
    index = 0
  }
  store.commit('upDateplayListIndex', index)
}
const lyric = computed(() => {
  let arr
  if (lyricList.value.lyric) {
    arr = lyricList.value.lyric.split(/[(\r\n)\r\n]+/).map((item, i) => {
      const min = item.slice(1, 3)
      const sec = item.slice(4, 6)
      let mill = item.slice(7, 10)
      let lrc = item.slice(11, item.length)
      let time =
        parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill)
      if (isNaN(Number(mill))) {
        mill = item.slice(7, 9)
        lrc = item.slice(10, item.length)
        time = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill)
      }
      // console.log(min,sec,Number(mill),lrc);
      return { min, sec, mill, lrc, time }
    })
    arr.forEach((item, i) => {
      if (i === arr.length - 1 || isNaN(arr[i + 1].time)) {
        item.pre = 100000
      } else {
        item.pre = arr[i + 1].time
      }
    })
  }
  console.log(arr)
  return arr
})
watch(playListIndex, () => {
  musiclyrc.value.scrollTop = 0
})
watch(currentTime, (newValue) => {
  const p = document.querySelector('p.active')
  if (p) {
    if (p.offsetTop > 250) {
      musiclyrc.value.scrollTop = p.offsetTop - 250
    }
  }
  if (newValue === duration.value) {
    if (playListIndex.value === playList.value.length - 1) {
      store.commit('upDateplayListIndex', 0)
      props.play()
    } else {
      store.commit('upDateplayListIndex', playListIndex.value + 1)
    }
  }
})
const isLyricShow = ref(false)
const back = () => {
  isLyricShow.value = false
  store.commit('upDatedetailShow')
}
</script>
<style lang='scss' scoped>
.musicDetail {
  padding: 0 0.2rem;
  .bgImg {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    filter: blur(30px);
  }
  .top {
    display: flex;
    height: 1.6rem;
    justify-content: space-between;
    align-items: center;
    .topLeft {
      display: flex;
      width: 40%;
      justify-content: space-between;
      align-items: center;
      .title {
        width: 2rem;
        color: #fff;
        p {
          margin-bottom: 0.1rem;
        }
        span {
          font-size: 0.28rem;
          color: #c4bcb8;
        }
      }
    }
    .icon {
      // fill: #fff;
      width: 30px;
      height: 30px;
    }
  }
  .center,
  .lyrc {
    position: relative;
    display: flex;
    height: 8rem;
    //竖直排列居中
    flex-direction: column;
    align-items: center;
    .needle {
      position: absolute;
      width: 2rem;
      height: 3rem;
      left: 46%;
      transform-origin: 0 0;
      transform: rotate(-15deg);
      transition: all 2s;
    }
    .needle_active {
      transform: rotate(0deg);
    }
    .cd {
      position: absolute;
      width: 5rem;
      height: 5rem;
      bottom: 1.6rem;
      z-index: -1;
    }
    .ar {
      position: absolute;
      width: 3.2rem;
      height: 3.2rem;
      border-radius: 50%;
      bottom: 2.5rem;
      animation: rotate_ar 10s linear infinite;
    }
    .ar_active {
      animation-play-state: running;
    }
    .ar_paused {
      animation-play-state: paused;
    }
    @keyframes rotate_ar {
      0% {
        transform: rotateZ(0deg);
      }
      100% {
        transform: rotateZ(360deg);
      }
    }
  }
  .lyrc {
    width: 8rem;
    overflow: scroll;
    p {
      margin-bottom: 0.3rem;
    }
  }
  .active {
    color: rgb(161, 29, 29);
    font-size: 0.36rem;
  }
  .footer {
    .footerTop {
      display: flex;
      height: 1.2rem;
      justify-content: space-around;
      align-items: center;
      .icon {
        width: 0.6rem;
        height: 0.6rem;
        fill: #fff;
      }
    }
    .footerContent {
      width: 100%;
      height: 0.6rem;
      input {
        height: 0.04rem;
        width: 100%;
      }
    }
    .footerBottom {
      display: flex;
      margin-top: 0.4rem;
      justify-content: space-around;
      .icon {
        width: 0.6rem;
        height: 0.6rem;
        fill: #fff;
      }
      .iconCenter {
        width: 0.8rem;
        height: 0.8rem;
        fill: #fff;
      }
    }
  }
}
</style>
